import styled from "styled-components";
import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
import { LockOutlined, PoweroffOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, Modal } from "antd";
import React, { useState, useEffect } from "react";
import { changePassword } from "../../services/graphql";
import * as antdHelper from "../../utils/antd-helper";
import store from "../../utils/store";

const { confirm } = Modal;

const App = ({ className }) => {
	const navigate = useNavigate();
	window.navigate = navigate;
	const [loading, setLoading] = useState(false);
	const [data, setData] = useState({});
	const [isModalOpen, setIsModalOpen] = useState(false);
	const onFinish = async values => {
		console.log("Received values of form: ", values);
		setLoading(true);
		if (!values.password) {
			setLoading(false);
			return antdHelper.alert("Password is required");
		}
		if (!values.password2) {
			setLoading(false);
			return antdHelper.alert("New password is required");
		}
		if (values.password2 != values.password3) {
			setLoading(false);
			return antdHelper.alert("Confirm password inequality");
		}
		let ret = await changePassword(values.password, values.password2);
		setLoading(false);
		if(ret.msg != "ok"){
			return;
		}
		if (ret.data.changePassword) {
			antdHelper.notiOK("Change password success,relogin again");
			setIsModalOpen(false);
			navigate('/login');
		}else{
			antdHelper.notiError("Change password fail");
		}
	};
	const onExit = () => {
		confirm({
			title: "Are you sure exit?",
			icon: <ExclamationCircleFilled />,
			content: "After logging out, you need to re-enter your account password next time.",
			okText: "Yes",
			okType: "danger",
			cancelText: "No",
			onOk() {
				console.log("OK");
				store.remove('token');
				store.remove('identity');
				navigate("/login");
			},
			onCancel() {
				console.log("Cancel");
			}
		});
	};
	return (
		<div className={className}>
			<div className="card-box">
				<div className="dcard" onClick={() => setIsModalOpen(true)}>
					<div className="dcard-body">
						<LockOutlined className="icon" />
						<div className="title">Change Password</div>
					</div>
				</div>
				<div className="dcard" onClick={onExit}>
					<div className="dcard-body">
						<PoweroffOutlined className="icon" />
						<div className="title">Exit</div>
					</div>
				</div>
			</div>
			<Modal title="Change Password" open={isModalOpen} footer={null} onCancel={() => setIsModalOpen(false)}>
				<Form
					name="basic"
					labelCol={{
						span: 8
					}}
					wrapperCol={{
						span: 16
					}}
					style={{
						maxWidth: 600
					}}
					initialValues={{
						remember: true
					}}
					onFinish={onFinish}
					autoComplete="off">
					<Form.Item
						label="Password"
						name="password"
						rules={[
							{
								required: true,
								message: "Please input your password!"
							}
						]}>
						<Input.Password />
					</Form.Item>

					<Form.Item
						label="New Password"
						name="password2"
						rules={[
							{
								required: true,
								message: "Please input your new password!"
							}
						]}>
						<Input.Password />
					</Form.Item>

					<Form.Item
						label="Confirm Password"
						name="password3"
						rules={[
							{
								required: true,
								message: "Please input your confirm password!"
							}
						]}>
						<Input.Password />
					</Form.Item>

					<Form.Item
						wrapperCol={{
							offset: 8,
							span: 16
						}}>
						<Button type="primary" loading={loading} disabled={loading} htmlType="submit">
							Submit
						</Button>
					</Form.Item>
				</Form>
			</Modal>
		</div>
	);
};
export default styled(App)`
	.card-box {
		display: flex;
		flex-direction: row;
		.dcard:hover {
			box-shadow: 0px 0px 9px 0px #00bcff;
		}
		.dcard {
			transition: all 1s;
			width: 31%;
			margin: 20px;
			padding: 40px 20px;
			cursor: pointer;
			.dcard-body {
				text-align: center;
				.icon {
					font-size: 30px;
					color: #03a9f4;
				}
				.title {
					text-align: center;
					font-size: 20px;
					color: rgb(85, 85, 85);
					padding-top: 20px;
				}
			}
		}
	}
`;
